<template>
  <view class="warp">
    <scroll-view :scroll-y="true" class="scrollHeight">
      <view class="top" :class="{'top': type != 2, 'top-other': type == 2}">
        <text>{{title}}</text>
        <text style="color: #C2AC78;font-family:PingFang SC;font-weight:500;font-style:italic;text-decoration:underline;font-size: 26rpx;" v-if="type == 2" @click="openDownloadModal">下载协议文档</text>
      </view>
      <view class="update border" @click="update" v-if="!imgUrl">
        <image src="/static/image/id.png" class="none-img"></image>
        <view style="padding: 0 30rpx;margin-top: 50rpx;">上传{{title}}</view>  
      </view>
      <view class="update border" @click="update" v-else>
        <image :src="imgUrl" class="has-img"></image>
      </view>
      <div class="text1">注：拍摄时请确保证件<text>边框完整，字体清晰，亮度均匀</text></div>
      <block v-if="type == 1 && infoFlag">
        <view class="text2">
          请确认您的公司信息，若有误请点击修改
        </view>
        <view class="box">
          <view class="name">名称</view>
          <view class="inpt">
            <input type="text" v-model="info.storeName" @blur="backFixationTop()">
          </view>
        </view>
        <view class="box">
          <view class="name">法定代表人</view>
          <view class="inpt">
            <input type="text" v-model="info.realname" @blur="backFixationTop()">
          </view>
        </view>
        <view class="box">
          <view class="name">注册地址</view>
          <view class="inpt">
            <input type="text" v-model="info.businessAddress" @blur="backFixationTop()">
          </view>
        </view>
        <view class="box" style="margin-bottom: 30rpx;">
          <view class="name"> 统一社会信用代码</view>
          <view class="inpt">
            <input type="text" v-model="info.regNum" @blur="backFixationTop()">
          </view>
        </view>
      </block>
    </scroll-view>
    <view class="footer">
      <button type="primary" class="sub-btn cur" plain="true" @click="save">确认保存</button>
    </view>
    <uni-popup ref="popup" type="center" :show="downloadModal.show" class="downloadModal" :maskClick="true">
      <view class="downloadModal_content">
        <image :src="downloadModal.url" mode="aspectFit" class="downloadModal_img"></image>
        <view class="downloadModal_tip">
          长按保存至相册
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import formValid from '@/unit/graceChecker.js'
import { uploadFile } from "@/unit/common.js"
import { updatePersonalQualificationApi, updateContractProxyApi, updateProxyApi } from '@/service/user/user.service.js'
import { discernCharter } from '@/service/join/join.service.js'
import uniPopup from '@/components/uni-popup/components/uni-popup/uni-popup.vue'
import { scrollToTargetPosition } from '@/mixin/index.mixin.js'
export default {
  mixins: [scrollToTargetPosition],
  components: {
    uniPopup
  },
  data() {
    return {
      downloadModal: {
        show: false,
        url: this.$store.state.imgBaseUrl + '/withdraw/gerenhetong.jpg'
      },
      ctId: null, // 合同Id
      tfId: null, // 打款记录Id
      qfId: null, // 资质记录
      type: null,
      title: '',
      imgId: null,
      imgUrl: '',
      infoFlag: false,
      infoStatus: null, // 营业执照审核状态
      info: {
        storeName: '',
        realname: '',
        regNum: '',
        businessAddress: ''
      }
    };
  },
  onLoad (option) {
    this.infoStatus = option.status;
    this.tfId = option.tfId;
    this.ctId = option.ctId;
    this.qfId = option.qfId;
    this.type = option.type;
    this.imgUrl = option.url;
    this.title = option.type == 1 ? '营业执照' : option.type == 2 ? '委托个人打款协议' : option.type == 3 ? '介绍信' : option.type == 4 ? '合同' : ''
  },
  onShow () {
  },
  methods: {
    save () {
      let rule = [
        {name: 'imgUrl', checkType: 'notnull', checkRule: '',  errorMsg: '请上传' + this.title},
      ];
      let checkRes = formValid.check({imgUrl: this.imgUrl}, rule);
      if (checkRes) {
        this.type == 1 ? this.saveLicense() : this.type == 2 ? this.saveProxy() : this.type == 3 ? this.saveContractProxy() : '';
      } else {
        uni.showToast({ title: formValid.error, icon: "none" });
      }
    },
    saveLicense () { // 保存营业执照
      // let rule = [
      //   {name: 'storeName', checkType: 'notnull', checkRule: '',  errorMsg: '请完善名称'},
      //   {name: 'realname', checkType: 'notnull', checkRule: '',  errorMsg: '请完善法定代表人'},
      //   {name: 'regNum', checkType: 'notnull', checkRule: '',  errorMsg: '请完善注册地址'},
      //   {name: 'businessAddress', checkType: 'notnull', checkRule: '',  errorMsg: '请完善统一社会新用代码'},
      // ];
      // let checkRes = formValid.check(this.info, rule);
      // if (checkRes) {
      // } else {
      //   uni.showToast({ title: formValid.error, icon: "none" });
      // }
      updatePersonalQualificationApi({
        id: this.qfId,
        storeName: this.info.storeName,
        realname: this.info.realname,
        businessAddress: this.info.businessAddress,
        licenseNumber: this.info.regNum,
        businessLicenseFileId: this.imgId
      }, res => {
        if (res.status == 0) {
          uni.showToast({
            title: '保存成功！',
            success: () => {
              setTimeout(function () {
                uni.navigateTo({
                  url: '/pages/cashWithDrawal/information'
                })
              }, 1500);
            }
          })
        }
      }, null, {showErrorMsg: true});
    },
    saveContractProxy () { // 上传委托个人签合同协议
      updateContractProxyApi({
        id: this.ctId,
        proxyFile: this.imgId
      }, res => {
        if (res.status == 0) {
          uni.showToast({
            title: '保存成功！',
            success: () => {
              setTimeout(function () {
                uni.navigateTo({
                  url: '/pages/cashWithDrawal/information'
                })
              }, 1500);
            }
          })
        }
      }, null, {showErrorMsg: true});
    },
    saveProxy () { // 上传委托个人打款协议
      updateProxyApi({
        id: this.tfId,
        proxyFile: this.imgId
      }, res => {
        if (res.status == 0) {
          uni.showToast({
            title: '保存成功！',
            success: () => {
              setTimeout(function () {
                uni.navigateTo({
                  url: '/pages/cashWithDrawal/information'
                })
              }, 1500);
            }
          })
        }
      }, null, {showErrorMsg: true});
    },
    openDownloadModal () {
      this.$refs.popup.open();
    },
    update () {
      uploadFile({success: (obj) => {
        this.imgUrl = obj.data.url;
        this.imgId = obj.data.id;
        this.type == 1 ? this.getInfo(obj.data.url, obj.data.id) : '';
      }})
    },
    getInfo (url, id) {
      let params = {
        appliedType: 2,
        isFace: 0,
        url: url
      }
      discernCharter(params, (res) => {
        if (res.status == 0) {
          this.infoFlag = true;
          this.info.storeName = res.data.name;
          this.info.realname = res.data.person;
          this.info.regNum = res.data.regNum;
          this.info.businessAddress = res.data.address;
        } else {
          this.infoFlag = false;
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.scrollHeight {
  height: calc(100vh - 100rpx);
}
.inpt {
  width: 73%;
  margin-left: 40rpx;
  display: flex;
  justify-content: space-between;
  .uni-list-cell {
    width: 100%;
    font-size: 28rpx;
  }
  .arrow {
    width: 11rpx;
    width: 21rpx;
    background-color: #999999;
  }
  input{
    width: 100%;
    font-size: 24rpx;
    font-weight:500;
    color: #999999;
  }
}
image {
  width: 100%;
  height: 100%;
}
// .h20 {
//   height: 20rpx;
//   background-color: #FAFAFA;
// }
.warp {
  height: 100vh;
  background-color: #FFFFFF;
  color: #333333;
  padding: 0 33rpx;
  .top {
    text-align: center;
    font-size: 36rpx;
    padding-top: 42rpx;
  }
  .top-other {
    display: flex;
    justify-content: space-between;
    font-size: 36rpx;
    padding-top: 42rpx;
  }
  .update {
    width: 300rpx;
    height: 400rpx;
    border-radius: 16rpx;
    font-size: 24rpx;
    color: #666666;
    text-align: center;
    margin: 120rpx auto 0;
    position: relative;
    // padding: 0 30rpx;
    .none-img {
      display: block;
      width: 79rpx;
      height: 79rpx;
      margin: 124rpx auto 22rpx;
    }
    
    .has-img {
      display: block;
      width:100%;
      height: 100%;
    }
    .border-radius {
      border-radius: 16rpx;
    }
    &.border {
      border: 1px dashed rgba(225,225,225,1);
    }
    .delect {
      width: 32rpx;
      height: 32rpx;
      line-height: 26rpx;
      color: #FFFFFF;
      text-align: center;
      background: rgba(51,51,51,1);
      opacity: 0.6;
      border-radius: 50%;
      z-index: 10;
      position: absolute;
      right: -38rpx;
      top: -35rpx;
    }
  }
  .text1 {
    text-align: center;
    font-size: 22rpx;
    margin-top: 33rpx;
    text {
      color: #C2AC78;
    }
  }
  
  .text2 {
    color: #333333;
    font-size: 22rpx;
    margin-top: 33rpx;
  }
  .box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 30rpx 0;
    font-size: 28rpx;
    border-bottom: 1rpx solid #E1E1E1;
    .name {
      width: 145rpx;
      font-size: 28rpx;
    }
   
    .inpt {
      width: 73%;
      margin-left: 40rpx;
      display: flex;
      justify-content: space-between;
      .uni-list-cell {
        width: 100%;
        font-size: 28rpx;
      }
      .arrow {
        width: 11rpx;
        width: 21rpx;
        background-color: #999999;
      }
      input{
        font-size: 24rpx;
        font-weight:500;
        color: #999999;
      }
    }
    .label {
      font-size: 28rpx;
      color: #333333;
      font-weight:500;
    }
    .line {
      width: 120rpx;
      font-size: 24rpx;
      text-align: right;
    }
  }
  .footer {
    width: 100%;
    border-top: 1px solid #E1E1E1;
    padding: 14rpx 0 20rpx;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 0;
    left: 0;
    button {
      height: 70rpx;
      margin: 0 32rpx;
      background-color: #636363;
      line-height: 70rpx;
      color: #ADA697;
      border: none;
      font-size: 30rpx;
      &.cur {
        color: #F6DA99;
        background-color: #434343;
      }
    }
  }
  
  .downloadModal {
    .downloadModal_content {
      display: flex;
      flex-flow: column;
      justify-content: center;
      opacity: 1;
      .downloadModal_img {
        width: 520rpx;
        height: 736rpx;
      }
      .downloadModal_tip {
        font-size: 28rpx;
        color: #999999;
        text-align: center;
        border-top: 2rpx solid #999999;
        padding-top: 20rpx;
      }
    }
  }
}
</style>
